<template>
	
		<view class="page">
			<view class="head">
				<view class="head1">
					<text class="iconfont icon-fenxiang1"  @click="goBack"></text>
					
					<text class="nav-title" v-if="action === 'list'">添加商品</text>
					<text class="nav-title" v-if="action === 'edit'">修改商品</text>
				</view>
			</view>
			<view class="main">
				<view class="title1">
					商品信息
				</view>
				<view class="storeDetail">
					<view class="storeName">
							<u--form
										labelPosition="left"
										:model="model1"
										:rules="rules"
										ref="uForm"
								>
									<u-form-item
											label="商品名称:"
											prop="userInfo.name"
											border-bottom
											ref="item1"
											label-width="150rpx"
									>
										<u--input
												v-model="model1.userInfo.name"
												border="none"
												placeholder="请输入商品名称"
										></u--input>
									</u-form-item>
									<u-form-item label="规格:" prop="userInfo.specification" border-bottom ref="item1">
									    <view style="display: flex; align-items: center;">
									      <u--input
									        v-model="newSpecification"
									        placeholder="标签"
									        border="bottom"
									        style="flex: 1; margin-right: 8px;"
									      ></u--input>
									
									      <u--input
									        v-model="newValue"
									        placeholder="值"
									        border="bottom"
									        style="flex: 1; margin-right: 8px;"
									      ></u--input>
									
									      <u-icon slot="right" name="plus" @click="addSpecification"></u-icon>
									    </view>
									  </u-form-item>
									
									  <!-- 显示已添加的规格和值，并允许编辑 -->
									 <view>
									   <view v-for="(item, index) in specifications" :key="index" style="margin-top: 30rpx; display: flex; align-items: center;">
									     
									     <!-- 标签文字 -->
									     <text style="margin-right: 10px;">标签：</text>
									     <u--input
									       v-model="item.specification"
									       placeholder="标签"
									       border="bottom"
									       style="flex: 1; margin-right: 8px;"
									     ></u--input>
									 
									     <!-- 属性值文字 -->
									     <text style="margin-right: 10px;">属性值：</text>
									     <u--input
									       v-model="item.value"
									       placeholder="值"
									       border="bottom"
									       style="flex: 1; margin-right: 8px;"
									     ></u--input>
									 
									     <u-icon slot="right" name="trash" @click="removeSpecification(index)"></u-icon>
									   </view>
									 </view>
								</u--form>
					</view>
				</view>
				<view class="title1">
					商品价格
				</view>
				<view class="storeDetail">
					<view class="storeName">
							<u--form
										labelPosition="left"
										:model="model2"
										:rules="rules"
										ref="uForm"
								>
									<u-form-item
											label="价格:"
											prop="userInfo.price"
											border-bottom
											ref="item1"
											
									>
										<u--input
												v-model="model2.userInfo.price"
												border="none"
												placeholder="请输入商品实际金额"
										></u--input>
									</u-form-item>
									
								</u--form>
							<view class="remark">
								*价格根据已设定的积分比例：<text class="text1">3</text>元+积分：
								<text class="text2">30 </text>
							</view>
					</view>
				</view>
				<view class="title1">
						图片管理
					</view>
					<view class="picture">
						<view class="storeName">
								<u--form
											labelPosition="left"
											:model="model2"
											:rules="rules"
											ref="uForm"
									>
									<u-upload
									  :fileList="fileList5"
									  @afterRead="afterRead"
									  @delete="deletePic"
									  name="5"
									  multiple
									  :maxCount="5"
									></u-upload>	
										
									</u--form>
						<view class="remark1">
							支持JPG、PNG、JPEG；最多上传5张）
						</view>		
						</view>
					</view>
				
			</view>
			<view class="bottom">
				<text v-if="action === 'list'">提交</text>
				<text v-if="action === 'edit'">确认</text>
			</view>
		</view>
</template>

<script>
	export default {
		
		data(){
			return{
				 action: '',  // 用于存储传递过来的参数
				model1: {
								userInfo: {
									name: 'uView UI',
									specification: '数量',
									value:'1'
								},
							},
							// 存储所有添加的规格和值
							      specifications: [],
				model2: {
								userInfo: {
									price: '30',
									
								},
							},
			    fileList5: [],
							newSpecification: "",  // 新规格输入框内容
							newValue: "",          // 新值输入框内容
							specifications: [],    // 存储已添加的规格和值
							rules: {
								'userInfo.name': {
									type: 'string',
											required: true,
											message: '请填写商品名称',
											trigger: ['blur', 'change']
								},
								
								
								'userInfo.price': {
									type: 'string',
											max: 1,
											required: true,
											message: '请输入商品实际金额',
											trigger: ['blur', 'change']
								},
								
							},

				
			}
			},
		onLoad(query) {
			console.log(query)
		    // 接收并保存传递的参数
		    if (query.action) {
		      this.action = query.action;
		    }
		  },
		methods:{
			goBack(){
				uni.navigateBack(-1)
			},
			 // 根据 action 值设置不同的页面状态或做其他操作
			    handleAction() {
			      if (this.action === 'edit') {
			        // 编辑模式
			        console.log('进入编辑模式');
			        // 执行编辑相关操作
			      } else if (this.action === 'list') {
			        // 发布商品模式
			        console.log('进入发布商品模式');
			        // 执行发布商品相关操作
			      }
			    },
			 // 删除图片
			      deletePic(event) {
			        this[`fileList${event.name}`].splice(event.index, 1);
			      },
			      // 新增图片
			      async afterRead(event) {
			        // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			        let lists = [].concat(event.file);
			        let fileListLen = this[`fileList${event.name}`].length;
			        lists.map((item) => {
			          this[`fileList${event.name}`].push({
			            ...item,
			            status: "uploading",
			            message: "上传中",
			          });
			        });
			        for (let i = 0; i < lists.length; i++) {
			          const result = await this.uploadFilePromise(lists[i].url);
			          let item = this[`fileList${event.name}`][fileListLen];
			          this[`fileList${event.name}`].splice(
			            fileListLen,
			            1,
			            Object.assign(item, {
			              status: "success",
			              message: "",
			              url: result,
			            })
			          );
			          fileListLen++;
			        }
			      },
			      uploadFilePromise(url) {
			        return new Promise((resolve, reject) => {
			          let a = uni.uploadFile({
			            url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
			            filePath: url,
			            name: "file",
			            formData: {
			              user: "test",
			            },
			            success: (res) => {
			              setTimeout(() => {
			                resolve(res.data.data);
			              }, 1000);
			            },
			          });
			        });
			      },
			// 添加规格的方法
			addSpecification() {
			  if (this.newSpecification && this.newValue) {
			    // 添加新的规格和对应值到数组
			    this.specifications.push({
			      specification: this.newSpecification,
			      value: this.newValue,
			    });
			
			    // 清空当前输入框的值
			    this.newSpecification = "";
			    this.newValue = "";
			  } else {
			    // 提示用户输入完整
			    uni.showToast({
			      title: "规格标签和值不能为空",
			      icon: "none",
			    });
			  }
			},
			// 删除规格的方法
			removeSpecification(index) {
			  this.specifications.splice(index, 1);
			},
		},
		 watch: {
		    action() {
		      // 当 action 变化时，调用 handleAction 方法
		      this.handleAction();
		    }
		  }
		}	
			
	
</script>

<style scoped lang="scss">
@import "listProduct.scss"

</style>